<template>
  <div>
    <el-button size="small" type="primary" style="margin: 5px" @click="drawer = true">切换功能</el-button>
    <el-button size="small" type="primary" style="margin: 5px" class="show-button" @click="onClickPage()">全屏打开</el-button>
    <el-drawer title="切换功能" :visible.sync="drawer" direction="rtl">
      <home-app-list class="home-list" :span="24" />
    </el-drawer>
  </div>
</template>

<script>
import HomeAppList from '@/components/HomeAppList.vue'

export default {
  name: 'DkShortcutButton',
  components: { HomeAppList },
  props: {
    value: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      drawer: false
    }
  },
  computed: {},
  mounted() {},
  methods: {
    onClick(router) {
      this.$router.push(router)
    },
    onClickPage() {
      window.open(process.env.VUE_APP_BASE_URL + '/gs_developer/#' + this.$route.fullPath)
    }
  }
}
</script>

<style scoped lang="scss">
//.show-button{
//  display: none;
//}
//// 如果尺寸小于1200，显示独立打开按钮
//@media (max-width: 1200px) {
//  .show-button{
//    display: inline-block;
//  }
//}

.home-list {
  margin: 10px;
  &::v-deep {
    .el-col {
      margin-bottom: 20px;
    }
    .el-card__body {
      cursor: pointer;
      text-align: center;
      border-radius: 10px;

      &:hover {
        color: #409eff;
      }

      i {
        font-size: 20px;
        padding: 10px;
      }
    }
  }
}
</style>
